<template>
  <div class="personnelDetail">
    <section class="header clearfix">
      <div class="back">
        <i class="iconfont iconfanhui1" @click="goBack()"></i>
        <span @click="goBack()">薛文诚</span>
      </div>
    </section>
    <!--基本信息-->
    <div class="p-t-lg">
      <header>
        <div class="title">基本信息</div>
      </header>
      <div class="main clearfix">
        <section>
          <span>
            姓名
            <i>*</i>
          </span>
          <span class="value">薛文诚</span>
        </section>
        <section>
          <span>
            身份证
            <i>*</i>
          </span>
          <span class="value">411503199411065245</span>
        </section>
        <section>
          <span>性别</span>
          <span class="value">暂无</span>
        </section>
        <section>
          <span>民族</span>
          <span class="value">暂无</span>
        </section>
        <section>
          <span>婚育</span>
          <span class="value">未知</span>
        </section>
        <section>
          <span>出生日期</span>
          <span class="value">暂无</span>
        </section>
        <section>
          <span>户籍地址</span>
          <span class="value">暂无</span>
        </section>
        <section>
          <span>最高学历</span>
          <span class="value">暂无</span>
        </section>
      </div>
    </div>
    <!--联络信息-->
    <div class="p-t-lg">
      <header>
        <div class="title">联络信息</div>
      </header>
      <div class="main clearfix">
        <section>
          <span>
            手机
            <i>*</i>
          </span>
          <span class="value">暂无</span>
        </section>
        <section>
          <span>住址</span>
          <span class="value">暂无</span>
        </section>
        <section>
          <span>紧急联络</span>
          <span class="value">暂无</span>
        </section>
      </div>
    </div>
    <!--社保/公积金-->
    <div class="p-t-lg">
      <header>
        <div class="title">社保/公积金</div>
      </header>
      <div class="main clearfix">
        <section>
          <span>缴纳项目</span>
          <span class="value">社保/公积金</span>
        </section>
        <section>
          <span>
            缴纳城市
            <i>*</i>
          </span>
          <span class="value">上海市</span>
        </section>
        <section>
          <span>
            户籍类型
            <i>*</i>
          </span>
          <span class="value">本地城镇</span>
        </section>
        <section>
          <span>
            缴纳方式
            <i>*</i>
          </span>
          <span class="value">公司全缴</span>
        </section>
        <section>
          <span>
            社保基数
            <i>*</i>
          </span>
          <span class="value">4925</span>
        </section>
        <section>
          <span>
            社保起缴月份
            <i>*</i>
          </span>
          <span class="value">2018-04</span>
        </section>
        <section>
          <span>
            养老保险
            <i>*</i>
          </span>
          <span class="value">4925</span>
        </section>
        <section>
          <span>
            医疗保险
            <i>*</i>
          </span>
          <span class="value">4925</span>
        </section>
        <section>
          <span>
            失业保险
            <i>*</i>
          </span>
          <span class="value">4925</span>
        </section>
        <section>
          <span>
            工伤保险
            <i>*</i>
          </span>
          <span class="value">4925</span>
        </section>
        <section>
          <span>
            生育保险
            <i>*</i>
          </span>
          <span class="value">4925</span>
        </section>
        <section>
          <span>
            残障金
            <i>*</i>
          </span>
          <span class="value">4925</span>
        </section>
        <section>
          <span>
            工会费
            <i>*</i>
          </span>
          <span class="value">4925</span>
        </section>
        <section>
          <span>
            大病医疗
            <i>*</i>
          </span>
          <span class="value">4925</span>
        </section>
        <section>
          <span>
            公积金基数
            <i>*</i>
          </span>
          <span class="value">11428</span>
        </section>
        <section>
          <span>
            公积金起缴月份
            <i>*</i>
          </span>
          <span class="value">2018-04</span>
        </section>
      </div>
    </div>
    <!--证件照片/扫描件-->
    <div class="p-t-lg">
      <header>
        <div class="title">证件照片/扫描件</div>
      </header>
      <div class="main">
        <div class="clearfix">
          <div class="img-box">
            <div class="img-bj" @click="showImg(0)">
              <el-image
                v-if="idCardFrontPhotoPath"
                style="width: 100%; height: 100%"
                :src="idCardFrontPhotoPath"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <p>身份证正面照片(头像面)</p>
            <ul>
              <li class="upBtn">
                上传
                <input type="file" name="" id="" @change="upImg($event, 2)" />
              </li>
            </ul>
          </div>
          <div class="img-box">
            <div class="img-bj" @click="showImg(1)">
              <el-image
                v-if="idCardBackPhotoPath"
                style="width: 100%; height: 100%"
                :src="idCardBackPhotoPath"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <p>身份证反面照片(国徽面)</p>
            <ul>
              <li class="upBtn">
                上传
                <input type="file" name="" id="" @change="upImg($event, 3)" />
              </li>
            </ul>
          </div>
          <div class="img-box">
            <div class="img-bj" @click="showImg(2)">
              <el-image
                v-if="residenceBookMainPath"
                style="width: 100%; height: 100%"
                :src="residenceBookMainPath"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <p>户口本主页</p>
            <ul>
              <li class="upBtn">
                上传
                <input type="file" name="" id="" @change="upImg($event, 4)" />
              </li>
            </ul>
          </div>
          <div class="img-box">
            <div class="img-bj" @click="showImg(3)">
              <el-image
                v-if="residenceBookPersonalPath"
                style="width: 100%; height: 100%"
                :src="residenceBookPersonalPath"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <p>户口本个人页</p>
            <ul>
              <li class="upBtn">
                上传
                <input type="file" name="" id="" @change="upImg($event, 5)" />
              </li>
            </ul>
          </div>
          <div class="img-box">
            <div class="img-head" @click="showImg(4)">
              <el-image
                v-if="personPhotoPath"
                style="width: 100%; height: 100%"
                :src="personPhotoPath"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <p>二寸白底免冠照</p>
            <ul class="tip-head">
              <li class="upBtn">
                上传
                <input type="file" name="" id="" @change="upImg($event, 1)" />
              </li>
            </ul>
          </div>
        </div>
        <ul class="explain">
          <li>说明</li>
          <li>1.照片中证件不可以被遮挡，需清晰看到文字信息</li>
          <li>2.照片中证件需为原件，请勿上传复印件照片</li>
          <li>3.仅支持jpg, jpeg, png格式的图片</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import base from "@/assets/js/base";
import { requestApiPost } from "../api/api";
import { reqRep } from "../report/reqReport";
import { resRep } from "../report/resReport";
export default {
  name: "personnelDetail",
  data() {
    return {
      dateDialog: false, //入职转正时间
      dialogFormVisible: false,
      infoDialog: false, //基本信息
      contactDialog: false, //联络信息
      salaryDialog: false, //薪酬
      socialDialog: false, //社保
      familyDialog: false, //家庭成员
      eduDialog: false, //教育经历
      wordDialog: false, //工作经历
      entryTime: "",
      positiveTime: "",
      censusValue: "",
      paymentType: "",
      socialType: "",
      payMonth: "",
      socialNumber: "",
      formLabelWidth: "160px",
      form: {
        name: "",
        phone: "",
        word: "",
        address: "",
        relation: "",
      },
      info: {
        name: "",
        id: "",
        sex: "",
        cid: "",
        nation: "",
        marital: "",
        education: "",
        birthDay: "",
        address: "",
      },
      contact: {
        phone: "",
        tel: "",
        email: "",
        address: "",
        contactName: "",
        relation: "",
        contactPhone: "",
      },
      salary: {
        money: "",
        date: "",
      },
      educationOptions: [
        { label: "文盲", value: "文盲" },
        { label: "小学", value: "小学" },
        { label: "初中", value: "初中" },
        { label: "高中", value: "高中" },
        { label: "中专", value: "中专" },
        { label: "大专", value: "大专" },
        { label: "本科", value: "本科" },
        { label: "硕士", value: "硕士" },
        { label: "博士", value: "博士" },
      ],
      censusOptions: [
        {
          value: "本地城镇",
          label: "本地城镇",
        },
        {
          value: "本地农村",
          label: "本地农村",
        },
        {
          value: "外地城镇",
          label: "外地城镇",
        },
        {
          value: "外地农村",
          label: "外地农村",
        },
        // {
        //   value: "外籍人员",
        //   label: "外籍人员",
        // },
      ],
      paymentOptions: [
        {
          value: "1",
          label: "各缴",
        },
        {
          value: "2",
          label: "公司全缴",
        },
      ],
      socialOptions: [
        {
          value: "测试",
          label: "测试",
        },
      ],
      relationOptions: [
        {
          value: "祖父/母",
          label: "祖父/母",
        },
        {
          value: "父亲",
          label: "父亲",
        },
        {
          value: "母亲",
          label: "母亲",
        },
        {
          value: "配偶",
          label: "配偶",
        },
        {
          value: "子/女",
          label: "子/女",
        },
        {
          value: "兄/弟",
          label: "兄/弟",
        },
        {
          value: "姐/妹",
          label: "姐/妹",
        },
        {
          value: "孙子/女",
          label: "孙子/女",
        },
        {
          value: "其他",
          label: "其他",
        },
      ],
      edu: {
        school: "",
        entrance: "",
        graduate: "",
        specialty: "",
        education: "",
      },
      word: {
        company: "",
        job: "",
        dimission: "",
        post: "",
        certifierName: "",
        certifierPhone: "",
        certifierEmail: "",
      },
      srcList: [],
      imgList: [],
    };
  },
  methods: {
    //展示指定图片
    showImg(i) {
      this.srcList = [];
      this.srcList.push(this.imgList[i]);
    },
    jumpPage(name) {
      this.$router.push(name);
    },
    goBack() {
      this.$router.go(-1);
    },
  },
  created() {},
};
</script>
<style scoped>
.header {
  padding: 15px;
  height: 50px;
  box-sizing: border-box;
  font-size: 14px;
}
.header i {
  margin-right: 5px;
}
.back {
  display: inline-block;
  cursor: pointer;
}
.add {
  float: right;
  color: #666;
  cursor: pointer;
}
.add:hover {
  color: #13cb6e;
}
.el-input,
.el-select {
  width: 228px;
}
.leave {
  padding: 15px;
  border-bottom: 1px solid #eee;
}
.leave .message {
  display: inline-block;
  line-height: 34px;
}
.leave-pointer {
  float: right;
}
.leave-pointer span {
  color: #666;
  margin-left: 20px;
  cursor: pointer;
}
.leave-pointer .reset:hover {
  color: #13cb6e;
}
.leave-pointer i {
  font-weight: bold;
  padding-right: 5px;
}
.leave-pointer .btn {
  height: 34px;
  line-height: 14px;
  padding: 8px;
  color: #fff;
  background-color: #13cb6e;
}
.el-form-item {
  width: 390px;
  margin: 0 auto 22px;
}
.change {
  display: inline-block;
  cursor: pointer;
  padding: 20px 20px 0;
}
.change i {
  color: #13cb6e;
  font-weight: bold;
  vertical-align: top;
}
.change:hover {
  color: #13cb6e;
}
.staff-detail-general {
  margin: 30px 0 50px;
}
.p-l-xxl {
  padding-left: 44px;
}
.p-l-xxl .name {
  font-size: 24px;
  font-weight: 700;
}
.p-l-xxl .p-l {
  color: #666;
  font-size: 14px;
  padding-left: 15px;
}
.mt {
  color: #999;
  padding: 20px 0 0 44px;
}
.mt ul {
  float: left;
  width: 50%;
}
.mt ul li {
  margin-bottom: 5px;
}
.mt i {
  color: #fff;
  margin-left: 8px;
  padding: 4px 8px;
  font-size: 14px;
  font-style: normal;
  border-radius: 3px;
  cursor: pointer;
  background-color: #13cb6e;
}
.p-t-lg {
  clear: both;
  padding: 30px 44px 15px;
  border-top: 1px solid #eee;
}
header .title {
  display: inline-block;
  font-size: 18px;
}
header .edit {
  float: right;
  color: #666;
  cursor: pointer;
}
.edit:hover {
  color: #13cb6e;
}
.edit i {
  vertical-align: bottom;
}
.main {
  margin-top: 30px;
}
.main > section {
  float: left;
  padding-bottom: 15px;
  width: 50%;
}
.main span {
  font-size: 14px;
  color: #999;
}
.main > section span:first-child {
  display: inline-block;
  width: 120px;
}
.main span i {
  color: #f56c6c;
}
.main .value {
  padding-left: 5px;
  color: #666;
}
.family {
  padding: 10px 20px;
  background-color: #eee;
  border-radius: 3px;
}
.family .info {
  display: inline-block;
}
.info .f-name,
.word-address {
  color: #666 !important;
}
.info li {
  margin-bottom: 5px;
}
.info span {
  display: inline-block;
  margin-right: 20px;
}
.family .operation {
  float: right;
  text-align: right;
}
.operation > span {
  margin-left: 20px;
  display: inline-block;
  cursor: pointer;
}
.operation > span:hover {
  color: #13cb6e;
}
.img-bj {
  position: relative;
  width: 225px;
  height: 135px;
  border-radius: 4px;
  margin: 0 10px 10px 0;
  background-color: #eee;
}
.img-head {
  position: relative;
  width: 108px;
  height: 135px;
  border-radius: 4px;
  margin: 0 10px 10px 0;
  background-color: #eee;
}
.img-head img,
.img-bj img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 3;
  border-radius: 4px;
}
.img-box p {
  color: #999;
  font-size: 12px;
}
.tip > ul {
  color: #999;
  float: left;
  width: 225px;
  margin: 0 10px 10px 0;
}
.img-box {
  float: left;
  margin: 0 10px 10px 0;
}
.img-box .tip-head {
  color: #999;
  width: 108px;
  margin: 0 10px 10px 0;
}
.img-box .upBtn {
  margin-top: 10px;
  position: relative;
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  background-color: #13cb6e;
}
.img-box .upBtn input {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
}
.explain {
  color: #999;
  margin-top: 10px;
}
</style>
